<template>
	<div>
		<el-form :model="info" ref="forms">
			<el-table ref="tableRef" :data="info.data" border>
				<el-table-column align="center" type="index" label="序号" width="70"> </el-table-column>
				<el-table-column align="center" property="componentName" label="组件名称">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.componentName'" :rules="formRules.name">
							<el-input maxlength="16" show-word-limit placeholder="请输入组件名称" v-model="info.data[row.$index].componentName" />
						</el-form-item>
					</template>
				</el-table-column>
				<!-- <el-table-column align="center" property="dataProvider" label="组件使用类型">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.dataProvider'" :rules="formRules.role">
							<el-input placeholder="推荐类组件" v-model="info.data[row.$index].dataProvider" />
						</el-form-item>
					</template>
				</el-table-column> -->
				<el-table-column align="center" property="componentUsageType" label="组件使用类型"> </el-table-column>
				<!-- <el-table-column align="center" property="applicationCode" label="所属应用代码"> </el-table-column> -->
				<el-table-column align="center" property="areas" label="功能领域">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.areas'" :rules="formRules.geshi">
							<el-select v-model="info.data[row.$index].areas" placeholder="请选择数">
								<el-option v-for="item in optionList.areas_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="businessArea" label="业务领域">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.businessArea'" :rules="formRules.geshi">
							<el-select v-model="info.data[row.$index].businessArea" placeholder="请选择">
								<el-option v-for="item in optionList.businessArea_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="componentType" label="组件类型">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.componentType'" :rules="formRules.geshi">
							<el-select v-model="info.data[row.$index].componentType" placeholder="请选择数">
								<el-option v-for="item in optionList.componentType_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="location" label="部署位置">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.location'" :rules="formRules.geshi">
							<el-select v-model="info.data[row.$index].location" placeholder="请选择">
								<el-option v-for="item in optionList.location_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="introduction" label="组件简介">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.introduction'" :rules="formRules.ziduan">
							<el-input maxlength="16" show-word-limit placeholder="请输入组件简介" v-model="info.data[row.$index].introduction" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template #default="scope">
						<!-- <el-button link size="small" type="primary" @click="submitForm()"> 确定 </el-button> -->
						<el-button link size="small" type="primary"> 确定 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<!-- <el-button type="primary" @click="submitForm()">Submit</el-button> -->
	</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance } from 'element-plus';
import { useDict } from '/@/hooks/dict';
const prop = defineProps({
	addNewTable: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const info = computed(() => {
	return {
		data: [...prop.addNewTable],
	};
});
const emit = defineEmits(['deleteRow']);
const deleteRow = (index: number) => {
	emit('deleteRow', index);
};
const optionList = ref({});
const formRules = reactive({
	name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
	role: [{ required: true, message: '请输入角色', trigger: 'change' }],
});
const forms = ref<FormInstance>();
const submitForm = async () => {
	if (!forms) return;
	return await forms.value?.validate((valid: any) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!');
			return false;
		}
	});
};
onMounted(() => {
	const { areas_type, businessArea_type, componentType_type, location_type } = useDict(
		'areas_type',
		'businessArea_type',
		'componentType_type',
		'location_type'
	);
	optionList.value = {
		areas_type: areas_type,
		businessArea_type: businessArea_type,
		componentType_type: componentType_type,
		location_type: location_type,
	};
});
defineExpose({ info });
</script>
